<template>
  <div>
    <a-card>
      <a-input-search placeholder="请输入项目名称" @search="onSearch" />
      <a-table
        style="margin-top:15px"
        :data-source="proList"
        :customRow="rowClick"
        :columns="columns"
        :rowKey="record => record.id"
        :pagination="false">
      </a-table>
    </a-card>
  </div>
</template>
<script>
import { getProList } from '@/api/system/message'
export default {
  data () {
    return {
      proName: '',
      proList: [],
      columns: [
         {
          title: '序号',
           customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '项目',
          dataIndex: 'proName'
        },
        {
          title: '待处理',
          dataIndex: 'pending'
        }
      ],
      rowClick: record => ({
        attrs: {
          style: 'cursor: pointer'
        },
        // 事件
        on: {
          click: () => {
            this.tableClick(record.proId)
          }
        }
      })

    }
  },
  mounted () {
    this.getProList()
  },
  methods: {
    getProList () {
      getProList({
        proName: this.proName
      }).then(res => {
        this.proList = res
        if (this.proList && this.proList.length) {
          this.tableClick(this.proList[0].proId)
        }
      })
    },
    onSearch (value) {
      this.proName = value
      this.getProList()
    },
    tableClick (value) {
      this.$emit('proId', value)
    }
  }
}
</script>
<style scoped >
  .content{
    display: flex;
  }
  .content-left{
    flex: 2;

  }
  .content-right{
    flex: 5;
    margin-left: 20px;
  }
</style>
